<template>
  <el-dialog
    top="5vh"
    width="850px"
    :title="`${editUserId ? '编辑' : '新增'}用户`"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    @close="dialogVisible = false"
    class="user_message_max"
  >
    <el-form :model="addFormData.userInfo" ref="dialogDom" inline :rules="userRules" label-width="120px">
      <el-form-item label="联系人姓名">
        <el-input v-model.trim="addFormData.userInfo.linkUserName" placeholder="联系人姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系人电话" prop="userName">
        <el-input v-model.trim="addFormData.userInfo.userName" placeholder="联系人电话作为登录账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-if="!editUserId" v-model.trim="addFormData.userInfo.password" placeholder="请输入密码"></el-input>
        <el-input
          v-else
          disabled
          type="password"
          v-model.trim="addFormData.userInfo.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="账户类别" prop="sysRoleIds">
        <el-select filterable multiple v-model="addFormData.userInfo.sysRoleIds" placeholder="请选择账户类别">
          <el-option
            v-for="(item, index) in organizeTreeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单位类型">
        <el-select filterable v-model="addFormData.userInfo.organizationType" placeholder="请选择单位类型">
          <el-option
            v-for="(item, index) in organizationTypeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单位名称">
        <el-input v-model.trim="addFormData.userInfo.organizationName" placeholder="单位名称"></el-input>
      </el-form-item>
      <el-form-item label="组织代码">
        <el-input v-model.trim="addFormData.userInfo.businessLicenseCode" placeholder="统一社会信用代码"></el-input>
      </el-form-item>
      <el-form-item label="办公地址">
        <el-input v-model.trim="addFormData.userInfo.officeAddress" placeholder="办公地址"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model.trim="addFormData.userInfo.email" placeholder="电子邮箱"></el-input>
      </el-form-item>
      <!-- <el-form-item label="地址">
        <el-input v-model.trim="addFormData.userInfo.address" placeholder="请输入地址"></el-input>
      </el-form-item>

      <el-form-item label="传真" prop="fax">
        <el-input v-model.trim="addFormData.userInfo.fax" placeholder="请输入传真"></el-input>
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model.trim="addFormData.userInfo.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="座机" prop="phone">
        <el-input v-model.trim="addFormData.userInfo.phone" placeholder="请输入座机号"></el-input>
      </el-form-item>
      <el-form-item label="微信号" prop="isWeChatAccount">
        <el-input v-model.trim="addFormData.userInfo.weChatAccount" placeholder="请输入微信号"></el-input>
      </el-form-item>
      <el-form-item label="QQ号" prop="qqAccount">
        <el-input v-model.trim="addFormData.userInfo.qqAccount" placeholder="请输入QQ号"></el-input>
      </el-form-item>
      <el-form-item label="用户编码">
        <el-input v-model.trim="addFormData.userInfo.code" placeholder="请输入编码"></el-input>
      </el-form-item>
      <el-form-item prop="sort" label="序号">
        <el-input v-model.number="addFormData.userInfo.sort" placeholder="请输入序号"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model.trim="addFormData.userInfo.comments" placeholder="请输入备注"></el-input>
      </el-form-item> -->
    </el-form>

    <div class="submitbtn">
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="formDataSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { weightList, classIfyList } from './config'
import { userRules } from '@/utils/tools/RegExpression.js'
import { getOrganizeList } from '@/apiList/api_power'
import authorityApi from '@/utils/tools/authorityApi/index.js'
import Dialog from './Dialog'

export default {
  name: 'editUsreDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    editUserId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      userRules,
      classIfyList,
      weightList,
      addFormData: {
        
        userInfo: {}
        
      },
      // 类型0超管 1管理员 2招标代理机构 3供应商
      organizeTreeList: [],
      organizationTypeList: [
        {
          name: '企业',
          id: 0
        },
        {
          name: '政府机构',
          id: 1
        },
        {
          name: '事业单位',
          id: 2
        },
        {
          name: '社会团体',
          id: 3
        },
        {
          name: '其他',
          id: 4
        }
      ]
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(v) {
        this.$emit('update:show', v)
      }
    }
  },
  watch: {
    show(v) {
      this.openDialog(v)
    }
  },
  created() {
    this.getAllrole()
    this.dialog = new Dialog(this, {
      //新建用户表单
      userInfo: {
        sysRoleIds: null,
        userName: '', //用户名
        password: '', //用户密码
        organizationName: '', //
        organizationType: '', //
        businessLicenseCode: '', //
        officeAddress: '', //
        email: '', //
        linkUserName: '' //
       
      }
     
    })
    // 机构树
  },
  methods: {
    getList() {
      this.$emit('getList')
    },
    openDialog(v) {
      if (!v) return
      if (!this.editUserId) {
        this.dialog.addOpenDialog()
      } else {
        this.dialog.editOpenDialog(this.editUserId)
      }
    },
    formDataSubmit() {
      this.dialog.formDataSubmit()
    },
    getAllrole() {
      authorityApi.RolesPort.getAllSysRoles({}, (res) => {
        if (res && res.length) {
          this.organizeTreeList = res
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.submitbtn {
  margin: 0 auto;
  display: block;
  margin-top: 40px;
  text-align: center;
}
</style>

<style lang="less">
.user_message_max {
  .el-select {
    margin-left: 0 !important;
  }
}
</style>
